<template>
  <div>
    <!--右边-->
    <div class="h-27">
      <div class="h-32 h1-32 m-0">
        <ul class="h-33 m-1">
          <li :class="type==1?'active':''" @click="changeType(1)">基本资料</li>
          <li :class="type==2?'active':''" @click="changeType(2)">账户绑定</li>
          <li :class="type==3?'active':''" @click="changeType(3)">收货地址</li>
          <!-- <li :class="type==4?'active':''" @click="changeType(4)">实名认证</li> -->
        </ul>
        <div class="m-2">
          <div class="m-3" v-if="type==1">
            <form class="m-4">
              <div class="m-5">
                <div class="m-6">
                  <el-upload
                    class="avatar-uploader"
                    :action="uploadUrls"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload"
                    :limit="1"
                    :with-credentials="true"
                  >
                    <img v-if="userinfo.avatar" class="m-7" :src="userinfo.avatar" />
                    <img v-else class="m-7" :src="require('@/assets/image/user_tx.png')" />
                  </el-upload>

                  <div class="m-8">
                    <span>点击更换</span>
                  </div>
                </div>
              </div>
              <div class="m-9">
                <span class="m-10">昵称</span>
                <el-input class="m-11" v-model="userinfo.nickName" placeholder="还没有妮称哟"></el-input>
                <!-- <input class="m-11" type="text" value='徐爽爽爽' v-model="userinfo.nickName"/> -->
              </div>

              <div class="m-9">
                <span class="m-10">选择身份</span>
                <div class="m-13">
                  <el-radio v-model="userinfo.type" :label="1">企业</el-radio>
                  <el-radio v-model="userinfo.type" :label="0">个人</el-radio>
                </div>
              </div>
              <div class="m-9" v-if="userinfo.type==0">
                <span class="m-10">真实姓名</span>
                <el-input class="m-11" v-model="userinfo.fullName" placeholder="还没有进行实名认证"></el-input>
                <!-- <input class="m-11" type="text" value='徐爽爽爽' disabled="disabled"/> -->
                <!--<a class="m-12"  >编辑</a>-->
              </div>
              <div class="m-9" v-if="userinfo.type==1">
                <span class="m-10">公司名称</span>
                <el-input v-model="userinfo.enterpriseName" placeholder="还没有进行企业认证" class="m-11"></el-input>
                <!-- <input class="m-11 number" type="text" value='12345678910' disabled="disabled"/> -->
                <!-- <a class="m-12 m1-12"  @click="changePhone">编辑</a> -->
              </div>
              <div class="m-9" v-if="userinfo.type==1">
                <span class="m-10">法人姓名</span>
                <el-input v-model="userinfo.fullName" placeholder="还没有法人姓名" class="m-11"></el-input>
              </div>
              <div class="m-9">
                <span class="m-10">{{userinfo.type==1?'法人身份证':'身份证'}}</span>
                <el-input v-model="userinfo.cardNum" placeholder="还没有绑定身份证" class="m-11"></el-input>
              </div>
              <div class="m-9">
                <span class="m-10">手机号</span>
                <el-input v-model="userinfo.phone" placeholder="还没有绑定手机号" class="m-11"></el-input>
              </div>
              <div class="m-9">
                <span class="m-10">邮箱</span>
                <el-input v-model="userinfo.email" placeholder="还没有绑定邮箱" class="m-11"></el-input>
              </div>
              <div class="m-14">
                <button class="m-15" @click="save()">保存</button>
              </div>
            </form>
          </div>
          <div class="m-3" v-if="type==2">
            <form class="m-4" style="padding-top: 0;">
              <div class="m-9">
                <span class="m-10">微信</span>
                <input
                  class="m-11"
                  type="text"
                  placeholder="暂未绑定微信"
                  :value="userinfo.wxNum"
                  disabled="disabled"
                />
                <a class="m-12" @click="wx">{{userinfo.wxNum?'已绑定':'未绑定'}}</a>
              </div>
              <div class="m-9">
                <span class="m-10">支付宝</span>
                <input
                  class="m-11"
                  type="text"
                  placeholder="暂未绑定支付宝"
                  :value="userinfo.alipayNum"
                  disabled="disabled"
                />
                <a class="m-12" @click="zfb">{{userinfo.alipayNum?'已绑定':'未绑定'}}</a>
              </div>
              <div class="m-9" v-if="userinfo.bankNum">
                <div class="m-28">
                  <img src="@/assets/image/yhk.png" />
                  <span>银行卡</span>
                </div>
                <div class="m-29">
                  <span class="m-30">{{userinfo.bankNum}}</span>
                  <span class="m-31">储蓄卡</span>
                </div>
                <a class="m-12">删除</a>
              </div>

              <div class="m-14">
                <a class="m-32" @click="yhk">
                  <span class="m-33">+</span>
                  <span class="m-34">添加银行卡</span>
                </a>
              </div>
            </form>
          </div>
          <div class="m-3" v-if="type==3">
            <div class="m-35">
              <div class="m-36">
                <div class="m-37">添加收货地址</div>
                <div class="layui-form" action>
                  <div class="layui-form-item">
                    <label class="layui-form-label">*收货人</label>
                    <div class="layui-input-block">
                      <input
                        v-model="add.acceptName"
                        style="width: 200px;"
                        type="text"
                        name="title"
                        lay-verify="title"
                        autocomplete="off"
                        class="layui-input"
                      />
                    </div>
                  </div>
                  <div class="layui-form-item" id="area-picker">
                    <div class="layui-form-label">*所在地区</div>
                    <!-- <div class="layui-input-inline" style="width: 200px;"> -->
                    <div class="layui-input-block" style="display: flex;
    align-items: center;">
                      省:
                      <input
                        v-model="add.province"
                        style="width: 100px;"
                        type="text"
                        name="title"
                        lay-verify="title"
                        autocomplete="off"
                        class="layui-input"
                        placeholder="请输入省"
                      />
                      市:
                      <input
                        v-model="add.city"
                        style="width: 100px;"
                        type="text"
                        name="title"
                        lay-verify="title"
                        autocomplete="off"
                        class="layui-input"
                        placeholder="请输入市"
                      />
                      区:
                      <input
                        v-model="add.area"
                        style="width: 100px;"
                        type="text"
                        name="title"
                        lay-verify="title"
                        autocomplete="off"
                        class="layui-input"
                        placeholder="请输入区"
                      />
                    </div>
                    <!-- <select
                        name="province"
                        class="province-selector"
                        data-value
                        lay-filter="province-1"
                      >
                        <option value>请选择省</option>
                    </select>-->
                    <!-- </div> -->
                    <!-- <div class="layui-input-inline" style="width: 200px;">
                      <select name="city" class="city-selector" data-value lay-filter="city-1">
                        <option value>请选择市</option>
                      </select>
                    </div>
                    <div class="layui-input-inline" style="width: 200px;">
                      <select
                        name="county"
                        class="county-selector"
                        data-value
                        lay-filter="county-1"
                      >
                        <option value>请选择区</option>
                      </select>
                    </div>-->
                  </div>
                  <div class="layui-form-item">
                    <label class="layui-form-label">*详细地址</label>
                    <div class="layui-input-block">
                      <input
                        v-model="add.adress"
                        style="width: 620px;"
                        type="text"
                        name="title"
                        lay-verify="title"
                        autocomplete="off"
                        class="layui-input"
                      />
                    </div>
                  </div>
                  <div class="layui-form-item">
                    <label class="layui-form-label">*手机号码</label>
                    <div class="layui-input-block">
                      <input
                        v-model="add.acceptPhone"
                        style="width: 330px;"
                        type="text"
                        name="title"
                        lay-verify="title"
                        autocomplete="off"
                        class="layui-input"
                      />
                    </div>
                  </div>

                  <div class="layui-form-item" pane>
                    <label class="layui-form-label"></label>
                    <div class="layui-input-block">
                      <el-radio v-model="add.state" label="0">非默认地址</el-radio>
                      <el-radio v-model="add.state" label="1">默认地址</el-radio>
                      <input type="checkbox" name="address" lay-skin="primary" title="设为默认地址" />
                    </div>
                  </div>
                  <div class="layui-form-item" style="margin-top: 55px;">
                    <div class="layui-input-block">
                      <button
                        v-if="!addButton"
                        class="layui-btn"
                        lay-submit
                        lay-filter="demo1"
                        @click="addAdresss"
                      >保存并使用</button>
                      <button
                        v-if="addButton"
                        class="layui-btn"
                        lay-submit
                        lay-filter="demo1"
                        @click="addAdresss"
                      >新增地址</button>
                      <button  v-if="!addButton" type="reset" class="layui-btn layui-btn-primary" @click="qx()">取消</button>
                    </div>
                  </div>
                </div>
              </div>
              <div class="m-38">
                <table class="m-39">
                  <thead>
                    <tr>
                      <th width="15%">收件人</th>
                      <th width="15%">所在地区</th>
                      <th width="25%">详细地址</th>
                      <th width="15%">手机号</th>
                      <th width="15%">操作</th>
                        <th width="15%">操作</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr v-for="(item,index) in dzList" :key="index">
                      <td class="e-1">{{item.acceptName}}</td>
                      <td>{{item.province}}{{item.city}}{{item.area}}</td>
                      <td>{{item.adress}}</td>
                      <td>{{item.acceptPhone}}</td>
                      <td>
                        <a @click="ediAdress(item)">修改</a>/
                        <a @click="editAdresss(item.acceptAddressId)">删除</a>
                      </td>
                      <td>
                        <a v-if="item.state==0" @click="mrAdresss(item.acceptAddressId)">设为默认</a>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
          <div class="m-3" v-if="type==4">
            <div class="m-40">
              <div class="m-41">你还没有认证银行卡，赶紧认证吧!</div>
              <div class="m-42">
                <a>立即认证</a>
              </div>
            </div>
            <div class="m-43">
              <form class="m-44">
                <div class="m-45">
                  <span class="m-46">姓名：</span>
                  <div class="m-47">
                    <input type="text" placeholder="请输入您的真实姓名" />
                  </div>
                </div>
                <div class="m-45">
                  <span class="m-46">身份证号码：</span>
                  <div class="m-47">
                    <input type="text" placeholder="请输入正确的身份证号" />
                  </div>
                </div>
                <div class="m-45">
                  <span class="m-46">个人银行卡号：</span>
                  <div class="m-47">
                    <input type="text" placeholder="请输入本人银行卡号" />
                  </div>
                </div>
                <div class="m-45">
                  <span class="m-46">手机号：</span>
                  <div class="m-47">
                    <input type="text" placeholder="请输入你银行卡绑定的手机号" />
                    <button type="button" class="m-48">获取验证码</button>
                  </div>
                </div>
                <div class="m-49">
                  <button type="button" class="m-50">下一步</button>
                  <div class="m-51">
                    <a>认证不成功？</a>
                  </div>
                </div>
              </form>
            </div>
            <div class="m-62">
              <img src="@/assets/image/tg.png" class="m-63" />
              <div class="m-41">你还没有认证银行卡，赶紧认证吧!</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div style="clear: both;"></div>
    <!--手机号弹框-->
    <!-- <div class="m-16" v-if="showEditPhone">
        <div class="m-17">
          <form class="m-18">
            <div class="m-19"><span class="m-20" >修改手机号</span><img class="m-21" src="@/assets/image/close.png"/></div>
            <div class="m-22">
              <div class="m-23"><input class="m-24" type="text" v-model="newPhone" placeholder="请输入新手机号码"/></div>
              <div class="m-23"><input class="m-24 m-25" type="text" placeholder="请输入验证码"/>
                <button v-if="smsButton" type="button" class="m-26" @click="sendOutCode">发送验证码</button>
                <button v-if="!smsButton" type="button" class="m-26">{{count}} s</button>
              </div>
              <button class="m-27" type="button">保存</button>
            </div>
          </form>
        </div>
    </div>-->

    <el-dialog title="绑定手机号码" :visible.sync="dialogVisible" width="30%" class="phonechang">
      <div class="m-23">
        <input class="m-24" type="text" v-model="newPhone" placeholder="请输入新手机号码" />
      </div>
      <div class="m-23">
        <input class="m-24 m-25" type="text" placeholder="请输入验证码" />
        <el-button type="danger" v-if="smsButton">发送验证码</el-button>
        <el-button v-if="!smsButton">{{count}} s</el-button>
        <!-- <button v-if="smsButton" type="button" class="m-26" @click="sendOutCode">发送验证码</button>
        <button v-if="!smsButton" type="button" class="m-26">{{count}} s</button>-->
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" size="mini">取 消</el-button>
        <el-button type="danger" @click="dialogVisible = false" size="mini">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
const baseUrl = process.env.VUE_APP_BASE_API;
var _self;
import {
  getUserData,
  uploadFace,
  editUserData,
  editAccountBinding,
  findAcceptAddress,
  addAcceptAddress,
  edithAcceptAddress,
  deleteAcceptAddress,
  defaultAcceptAddress,
  sendoutSms,
} from "@/api/userIndex/userInfoEdit";
import { getToken } from "@/utils/auth";
export default {
  name: "userInfoEdit",
  data() {
    return {
      uploadUrls: baseUrl + "api/file/imageUpload", //上传图片路径
      type: 1,
      showEditPhone: false,
      newPhone: undefined, //新手机号
      code: undefined, //验证码
      smsButton: true, //防止短信重复发送
      count: "", //短信倒计时
      timer: null, //定时器

      userinfo: {
        nickName: "",
        fullName: undefined,
        type: 1,
        phone: "",
        email: "",
        avatar: null,
        enterpriseName: "",
        wxNum: "",
        alipayNum: "",
        bankNum: "",
      },
      dialogVisible: false,
      add: {
        //新增地址
        province: null,
        city: null,
        area: null,
        adress: null,
        acceptPhone: null,
        acceptName: null,
        state: "0",
      },
      addButton: true, //新增按钮
      dzList: Array,
    };
  },
  created() {
    _self = this;
    _self.init();
    _self.getAdresss();
  },
  methods: {
    edit() {
      let _this = this;
      editUserData(_this.userinfo).then((res) => {
        if (res.code == 200) {
          this.$message({
            message: "保存成功",
            type: "success",
          });
          _this.init();
        } else {
          this.$message.error("保存失败");
        }
      });
    },
    // 用户绑定:
    wx() {
      this.$prompt("请输入微信号", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then(({ value }) => {
          console.log(value);
          this.userinfo.wxNum = value;
          this.edit();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消输入",
          });
        });
    },
    zfb() {
      this.$prompt("请输入支付宝账号", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then(({ value }) => {
          console.log(value);
          this.userinfo.alipayNum = value;
          this.edit();
          this.$message({
            type: "success",
            message: "修改成功",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消输入",
          });
        });
    },
    yhk() {
      this.$prompt("请输入银行卡号", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then(({ value }) => {
          console.log(value);
          this.userinfo.bankNum = value;
          this.edit();
          this.$message({
            type: "success",
            message: "添加成功",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消输入",
          });
        });
    },

    init() {
      getUserData().then((res) => {
        _self.userinfo = res.data;
      });
    },
    save() {
      let _this = this;
      _this.edit();
    },

    //tab点击
    changeType(e) {
      this.type = e;
    },
    changePhone() {
      //修改手机号弹窗
      //if(this.showEditPhone){this.showEditPhone=false}else{this.showEditPhone=true}
      _self.dialogVisible = true;
    },
    sendOutCode() {
      //发送验证码
      if (!this.smsButton) {
        return; //拦截
      }
      this.smsButton = false; //按钮失效
      var myreg = /^[1][3,4,5,7,8][0-9]{9}$/;
      if (!myreg.test(this.newPhone)) {
        this.msgError("手机格式不正确");
        this.smsButton = true;
      } else {
        const TIME_COUNT = 60;
        if (!this.timer) {
          this.count = TIME_COUNT;
          this.timer = setInterval(() => {
            if (this.count > 0 && this.count <= TIME_COUNT) {
              this.count--;
            } else {
              this.smsButton = true;
              clearImmediate(this.timer);
              this.timer = null;
            }
          }, 1000);
        }
        let data = { phone: this.newPhone };
        sendoutSms(data).then((response) => {
          if (response.code === 200) {
            this.msgSuccess("短信发送成功");
          }
        });
      }
    },
    // 图片上传
    handleAvatarSuccess(res, file) {
      _self.userinfo.avatar = res.url;
    },
    beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isLt2M;
    },
    //地址
    getAdresss() {
      let _this = this;
      findAcceptAddress({}).then((res) => {
        if (res.code == 200) {
          _this.dzList=res.data
        }
      });
    },
    //新增
    addAdresss() {
      let _this = this;
      addAcceptAddress(this.add).then((res) => {
        if (res.code == 200) {
          this.$message({
            type: "success",
            message: "新增成功",
          });
          _this.getAdresss();
        } else {
          this.$message({
            type: "info",
            message: "新增失败",
          });
        }
      });
    },
    //删除
    editAdresss(e) {
      let _this=this
      deleteAcceptAddress({
        acceptAddressId: e,
      }).then((res) => {
        if (res.code == 200) {
          this.$message({
            type: "success",
            message: "删除成功",
          });
          _this.getAdresss();
        } else {
          this.$message({
            type: "info",
            message: "删除失败",
          });
        }
      });
    },
    //设置默认地址
    mrAdresss(e) {
 let _this = this;
      defaultAcceptAddress({
        acceptAddressId:e,
      }).then((res) => {
        if (res.code == 200) {
          this.$message({
            type: "success",
            message: "设置成功",
          });
          _this.getAdresss();
        } else {
          this.$message({
            type: "info",
            message: "设置失败",
          });
        }
      });
    },
    ediAdress(e) {
      let _this = this;
      _this.add = e;
      _this.addButton = false;
    },
    qx() {
      let _this = this;
      _this.add = {
        //新增地址
        province: null,
        city: null,
        area: null,
        adress: null,
        acceptPhone: null,
        acceptName: null,
        state: "0",
      };
      _this.addButton = true;
    },
  },
};
</script>

<style >
@import "../../layui/css/layui.css";
@import "../../css/index.css";
@import "../../css/user_listing.css";
@import "../../css/user_info.css";
@import "../../css/idangerous.swiper.css";
.m-4 input {
  text-align: center;
}
.el-dialog__header {
  background: #d81e06;

  /* background: #f7f7f7; */
}
.el-dialog__title {
  color: #fff;
}
.el-dialog__footer {
  background: #f7f7f7;
  padding: 10px 20px 10px;
}
.phonechang .m-24 {
  height: 40px;
  border: 1px solid #f1f1f1 !important;
  width: 100%;
  box-sizing: border-box;
  padding: 0 15px;
  border-radius: 5px;
}
.phonechang .m-25 {
  width: 70%;
  float: left;
  margin-right: 10px;
}
</style>
